<template>
  <div class="box">
    <h1>{{ count }}</h1>
    <div>{{getTodoById(2)}}</div>
    <div>
      <button @click="fn()">fn</button>
      <button @click="add">add</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['getTodoById'])
  },
  methods: {
    ...mapMutations(['add1']),
    ...mapActions(['asyncAdd']),
    fn () {
      var users = this.getTodoById(1);
      console.log(users);
    },
    add () {
      //this.$store.state.count++;
      //this.add1(10);
      //this.$store.dispatch('asyncAdd', 5);
      this.asyncAdd(3);
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  background-color: red;
  flex: 1;
}
</style>